<!-- home -->
<template>
  <div class="container">
    <van-nav-bar
      title="月度进展情况详情"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <div style="margin: 5px;">
      <van-cell title="选择月份" required v-model="ssyf" @click="onDisplay2" is-link />
    </div>

    <div style="margin: 5px;">
      <van-cell title="业绩总金额：" required v-model="yjzje"  />
    </div>

    <van-popup v-model="ssyfshow" round position="bottom" :style="{ height: '50%' }" >
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="onConfirmNy1"
        @cancel="oncancel1"
      />
    </van-popup>
    <van-tabs v-model="active" @click="onChangePhTab">
      <van-tab title="按销售额">
        <div class="box">
          <div class="rownr">
            <div style="width: 10%;text-align: center;padding: 10px 0 ; ">排名</div>
            <div class="shuxian"></div>
            <div style="width: 20%;text-align: center;padding: 10px 0 ;">部门</div>
            <div class="shuxian"></div>
            <div style="width: 20%;text-align: center;padding: 10px 0 ;">业绩</div>
            <div class="shuxian"></div>
            <div style="width: 20%;text-align: center;padding: 10px 0 ;">任务</div>
            <div class="shuxian"></div>
            <div style="width: 20%;text-align: center;padding: 10px 0 ;;">完成率</div>
            <div class="shuxian"></div>
            <div style="width: 20%;text-align: center;padding: 10px 0 ;">负责人</div>
          </div>
          <div v-for="item in xseList " :key="item.index"  >
            <div :class="item.index%2==0 ? 'rownr1':'rownr'" >
              <div style="width: 10%;text-align: center;padding:10px 0 ; ">{{item.index}}</div>
              <div style="width: 20%;text-align: center;padding:10px 0 ;">{{item.deptname}}</div>
              <div style="width: 20%;text-align: center;padding:10px 0 ;color: green">{{item.value}}</div>
              <div style="width: 20%;text-align: center;padding:10px 0 ;color: #20a0ff;">{{item.tasknum}}</div>
              <div style="width: 20%;text-align: center;padding:10px 0 ;color: red;">{{item.wcl}}%</div>
              <div style="width: 20%;text-align: center;padding:10px 0 ;">{{item.fzrname}}</div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="按完成率">

        <div class="box">
          <div class="rownr">
            <div style="width: 10%;text-align: center;padding: 10px 0 ; ">排名</div>
            <div class="shuxian"></div>
            <div style="width: 20%;text-align: center;padding: 10px 0 ;">部门</div>
            <div class="shuxian"></div>
            <div style="width: 20%;text-align: center;padding: 10px 0 ;">业绩</div>
            <div class="shuxian"></div>
            <div style="width: 20%;text-align: center;padding: 10px 0 ;">任务</div>
            <div class="shuxian"></div>
            <div style="width: 20%;text-align: center;padding: 10px 0 ;;">完成率</div>
            <div class="shuxian"></div>
            <div style="width: 20%;text-align: center;padding: 10px 0 ;">负责人</div>
          </div>
          <div  v-for="item in xseList " :key="item.index"  >
            <div :class="item.index%2==0 ? 'rownr1':'rownr'" >
              <div style="width: 10%;text-align: center;padding:10px 0 ;">{{item.index}}</div>
              <div style="width: 20%;text-align: center;padding:10px 0 ;">{{item.deptname}}</div>
              <div style="width: 20%;text-align: center;padding:10px 0 ;color: green">{{item.value}}</div>
              <div style="width: 20%;text-align: center;padding:10px 0 ;color: #20a0ff;">{{item.tasknum}}</div>
              <div style="width: 20%;text-align: center;padding:10px 0 ;color: red;">{{item.wcl}}%</div>
              <div style="width: 20%;text-align: center;padding:10px 0 ;">{{item.fzrname}}</div>
            </div>
          </div>
        </div>
      </van-tab>

      <van-tab title="按周完成率">
        <van-tabs v-model="weekActive" @click="onChangeWeekTab">
          <van-tab title="第一周">
            <div class="box">
              <div class="rownr">
                <div style="width: 10%;text-align: center;padding: 10px 0 ; ">排名</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;">部门</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;">业绩</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;">任务</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;;">完成率</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;">负责人</div>
              </div>
              <div  v-for="item in xseList " :key="item.index"  >
                <div :class="item.index%2==0 ? 'rownr1':'rownr'" >
                  <div style="width: 10%;text-align: center;padding:10px 0 ;">{{item.index}}</div>
                  <div style="width: 20%;text-align: center;padding:10px 0 ;">{{item.deptname}}</div>
                  <div style="width: 20%;text-align: center;padding:10px 0 ;color: green">{{item.value}}</div>
                  <div style="width: 20%;text-align: center;padding:10px 0 ;color: #20a0ff;">{{item.firstTaskNum}}</div>
                  <div style="width: 20%;text-align: center;padding:10px 0 ;color: red;">{{item.wcl}}%</div>
                  <div style="width: 20%;text-align: center;padding:10px 0 ;">{{item.fzrname}}</div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="第二周">
            <div class="box">
              <div class="rownr">
                <div style="width: 10%;text-align: center;padding: 10px 0 ; ">排名</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;">部门</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;">业绩</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;">任务</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;;">完成率</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;">负责人</div>
              </div>
              <div  v-for="item in xseList " :key="item.index"  >
                <div :class="item.index%2==0 ? 'rownr1':'rownr'" >
                  <div style="width: 10%;text-align: center;padding: 10px 0 ;">{{item.index}}</div>
                  <div style="width: 20%;text-align: center;padding: 10px 0 ;">{{item.deptname}}</div>
                  <div style="width: 20%;text-align: center;padding: 10px 0 ;color: green">{{item.value}}</div>
                  <div style="width: 20%;text-align: center;padding: 10px 0 ;color: #20a0ff;">{{item.secondTaskNum}}</div>
                  <div style="width: 20%;text-align: center;padding: 10px 0 ;color: red;">{{item.wcl}}%</div>
                  <div style="width: 20%;text-align: center;padding: 10px 0 ;">{{item.fzrname}}</div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="第三周">
            <div class="box">
              <div class="rownr">
                <div style="width: 10%;text-align: center;padding: 10px 0 ; ">排名</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;">部门</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;">业绩</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;">任务</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;;">完成率</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;">负责人</div>
              </div>
              <div  v-for="item in xseList " :key="item.index"  >
                <div :class="item.index%2==0 ? 'rownr1':'rownr'" >
                  <div style="width: 10%;text-align: center;padding: 10px 0 ;">{{item.index}}</div>
                  <div style="width: 20%;text-align: center;padding: 10px 0 ;">{{item.deptname}}</div>
                  <div style="width: 20%;text-align: center;padding: 10px 0 ;color: green">{{item.value}}</div>
                  <div style="width: 20%;text-align: center;padding: 10px 0 ;color: #20a0ff;">{{item.thirdTaskNum}}</div>
                  <div style="width: 20%;text-align: center;padding: 10px 0 ;color: red;">{{item.wcl}}%</div>
                  <div style="width: 20%;text-align: center;padding: 10px 0 ;">{{item.fzrname}}</div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="第四周">
            <div class="box">
              <div class="rownr">
                <div style="width: 10%;text-align: center;padding: 10px 0 ; ">排名</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;">部门</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;">业绩</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;">任务</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;;">完成率</div>
                <div class="shuxian"></div>
                <div style="width: 20%;text-align: center;padding: 10px 0 ;">负责人</div>
              </div>
              <div  v-for="item in xseList " :key="item.index"  >
                <div :class="item.index%2==0 ? 'rownr1':'rownr'" >
                  <div style="width: 10%;text-align: center;padding: 10px 0 ;">{{item.index}}</div>
                  <div style="width: 20%;text-align: center;padding: 10px 0 ;">{{item.deptname}}</div>
                  <div style="width: 20%;text-align: center;padding: 10px 0 ;color: green">{{item.value}}</div>
                  <div style="width: 20%;text-align: center;padding: 10px 0 ;color: #20a0ff;">{{item.fourthTaskNum}}</div>
                  <div style="width: 20%;text-align: center;padding: 10px 0 ;color: red;">{{item.wcl}}%</div>
                  <div style="width: 20%;text-align: center;padding: 10px 0 ;">{{item.fzrname}}</div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>

import { Dialog, Toast, Grid, GridItem, Calendar, Cell } from 'vant'
import { floatAdd, floatSub, floatMul, floatDiv } from '../../utils/NumberUtil'
import { addAchievements, queryUserInfo, queryDeptBusiTask, updateBusitask, queryYwyAchievements, queryMonthRanking, queryWeekRanking, queryDeptAchDetail } from '../../api/api'

export default {
  name: 'Ydjzqk',
  data() {
    return {
      date: '',
      show: false,
      dateshow: false,
      minDate: new Date(2020, 1, 1),
      maxDate: new Date(2029, 12, 31),
      zje: '',
      deptid: '',
      deptname: '',
      currentDate: new Date(),
      postList: [],
      rqshow: true,
      kjflag: false,
      ssyfshow: false,
      ssyf: '',
      weekflag: '',
      weekList: [],
      xseList: [],
      sortflag: '1',
      active: 0,
      weekActive: 0,
      yjzje: ''
    }
  },

  created() {
    var dateNow = new Date()
    var year = dateNow.getFullYear() + ''
    var month = (dateNow.getMonth() + 1) + ''
    var day = dateNow.getDate() + ''
    var ssyf = year + (month < 10 ? '0' : '') + month
    this.ssyf = ssyf
    this.ywyname = this.$store.getters.userName
    this.queryUserInfo()
    this.queryDeptAchDetail()
  },
  mounted() {

  },

  methods: {

    addyj() {
      this.$router.push({ path: '/addyj', query: {}})
    },

    onDisplay2() {
      this.ssyfshow = true
    },

    onClose() {
      this.show = false
    },

    onConfirm(event) {
      this.dateshow = false
      this.date = this.formatDate(event)
      this.queryYwyAchievements()
    },

    formatDate(date) {
      const date1 = new Date(date)
      return `${date1.getFullYear()}/${date1.getMonth() + 1}/${date1.getDate()}`
    },

    // 查询当前用户所在部门
    queryUserInfo() {
      const param = {}
      const userid = this.$store.getters.userId
      param.userid = userid
      queryUserInfo(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          this.deptname = response.data.deptname
          this.deptid = response.data.deptid
          this.postList = response.data.postList
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    },

    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },

    oncancel() {
      this.dateshow = false
    },

    oncancel1() {
      this.ssyfshow = false
    },

    onConfirmNy1(event) {
      var year = event.getFullYear() + ''
      var month = (event.getMonth() + 1) + ''
      var date = year + (month < 10 ? '0' : '') + month
      this.ssyf = date
      this.ssyfshow = false
      this.queryDeptAchDetail()
    },

    onChangePhTab(event) {
      if (event == 0) {
        this.weekflag = ''
        this.sortflag = '1'
        this.queryDeptAchDetail()
      }
      if (event == 1) {
        this.weekflag = ''
        this.sortflag = '2'
        this.queryDeptAchDetail()
      }
      if (event == 2) {
        this.weekflag = '1'
        this.queryDeptAchDetail()
      }
    },

    onChangeWeekTab(event) {
      if (event == 0) {
        this.weekflag = '1'
        this.queryDeptAchDetail()
      }
      if (event == 1) {
        this.weekflag = '2'
        this.queryDeptAchDetail()
      }
      if (event == 2) {
        this.weekflag = '3'
        this.queryDeptAchDetail()
      }
      if (event == 3) {
        this.weekflag = '4'
        this.queryDeptAchDetail()
      }
    },

    queryDeptAchDetail() {
      const param = {}
      param.ssyf = this.ssyf
      param.deptid = this.deptid
      param.sortflag = this.sortflag
      param.weekflag = this.weekflag
      queryDeptAchDetail(param).then(response => {
        if (response.code === 200) {
          console.log('部门详情')
          console.log(response)
          let yjzje = 0
          const xseList = response.rows
          if (xseList) {
            for (var i = 0; i < xseList.length; i++) {
              xseList[i].index = i + 1
              yjzje = yjzje + xseList[i].value
            }
          }
          this.xseList = xseList
          this.yjzje = yjzje
        } else {
          Toast.fail(response.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

  .container{
    width: 100%;
    height: calc(100vh);
    background-color: #F0F4FE;
  }

  .navclass{
    background-color:#ffffff;
  }

  .box{
    background-color: #ffffff;
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .shuxian{
    width: 1px;
    height: 15px;
    line-height:10px;
    text-align: center;
    background: #B2B2B2;
    position: relative;
    margin-left: 10px;
    margin-top: 10px;
    border-radius: 5px;
  }

  .mubiao{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    right: 20px;
    position: fixed;
  }

  .columnr{
    display: flex;
    flex-direction: column;
    align-content: center;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
  }

  .rownr{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
  }

  .rownr1{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    background-color: #F0F4FE;
  }

  .quyu{
    margin-top: 20px;
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
  }

  .fenge{
    width: 1px;
    height: 40px;
    line-height:20px;
    text-align: center;
    background: #B2B2B2;
    position: relative;
    margin-top: 10px;
    border-radius: 5px;
  }

  .yuangong{
    padding-bottom: 10px;
    margin:5px;
    width: 95%;
    height: auto;
    background-color: #F8FBFD;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
  }
</style>
